<template>
  <div>
    <div class="banner">
      <img class="img" :src="this.banner" alt="">
      <div class="infor">
        <div class="title">{{this.sight}}</div>
        <div class="icon" @click="handleBannerClick">
          <span class="iconfont">&#xe78e;</span>&nbsp;&nbsp;<span>{{this.gallery.length}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    sight: String,
    banner: String,
    gallery: Array
  },
  methods: {
    handleBannerClick () {
      this.$emit('showSwiper')
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position relative
  height 0
  padding-bottom 55%
  overflow hidden
  background-color #eee
  .img
    width 100%
  .infor
    display flex
    align-items center
    position absolute
    height .5rem
    padding 0 .2rem .1rem .2rem
    color #fff
    bottom 0
    left 0
    right 0
    font-size 18px
    background linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
    .title
      flex 1
    .icon
      height .4rem
      line-height .4rem
      background #000
      border-radius 1rem
      font-size 12px
      padding 0 .3rem
      .iconfont
        font-size 12px
</style>
